<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Upload</title>
    <link rel="stylesheet" href="./plugins/layui/css/layui.css" media="all">
    <style>
        .layui-upload-img {
            width: 92px;
            height: 92px;
            margin: 0 10px 10px 0;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-tab-item layui-show site-demo">
        <div class="layui-main" style="margin-top: 20px">
            <div id="LAY_preview">

                <blockquote class="layui-elem-quote">
                    为节省服务器开销，以下示例均未配置真实上传接口，所以每次上传都会报提示：请求上传接口出现异常，这属于正常现象。
                    <br>具体实例可点击这里查看：<button class="layui-btn layui-btn-danger"><a href="uploadDemo.html" style="color: #ffffff;">上传文件demo</a></button>
                </blockquote>

                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>常规使用：普通图片上传</legend>
                </fieldset>

                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test1">上传图片</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="demo1">
                        <p id="demoText"></p>
                    </div>
                    <button type="button" class="layui-btn" id="submitInfo">上传</button>

                </div>
                <div>

                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend>上传多张图片</legend>
                    </fieldset>

                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="test2">多图片上传</button>
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            预览图：
                            <div class="layui-upload-list" id="demo2"></div>
                        </blockquote>
                    </div>

                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend>指定允许上传的文件类型</legend>
                    </fieldset>

                    <button type="button" class="layui-btn" id="test3"><i class="layui-icon">&#xe67c;</i>上传文件</button>
                    <button type="button" class="layui-btn layui-btn-primary" id="test4"><i
                            class="layui-icon">&#xe67c;</i>只允许压缩文件
                    </button>
                    <button type="button" class="layui-btn" id="test5"><i class="layui-icon">&#xe67c;</i>上传视频</button>
                    <button type="button" class="layui-btn" id="test6"><i class="layui-icon">&#xe67c;</i>上传音频</button>
                    <div style="margin-top: 10px;">

                        <!-- 示例-970 -->
                        <ins class="adsbygoogle"
                             style="display:inline-block;width:970px;height:90px"
                             data-ad-client="ca-pub-6111334333458862"
                             data-ad-slot="3820120620"></ins>

                    </div>
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend>设定文件大小限制</legend>
                    </fieldset>

                    <button type="button" class="layui-btn layui-btn-danger" id="test7"><i
                            class="layui-icon">&#xe67c;</i>上传图片
                    </button>
                    <div class="layui-inline layui-word-aux">
                        这里以限制 60KB 为例
                    </div>

                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend>同时绑定多个元素，并将属性设定在元素上</legend>
                    </fieldset>

                    <button class="layui-btn demoMore" lay-data="{url: '/a/'}">上传A</button>
                    <button class="layui-btn demoMore" lay-data="{url: '/b/', size:5}">上传B</button>
                    <button class="layui-btn demoMore" lay-data="{url: '/c/', accept: 'file',size:10}">上传C</button>

                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend>选完文件后不自动上传</legend>
                    </fieldset>

                    <div class="layui-upload">
                        <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
                        <button type="button" class="layui-btn" id="test9">开始上传</button>
                    </div>
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend>拖拽上传</legend>
                    </fieldset>

                    <div class="layui-upload-drag" id="test10">
                        <i class="layui-icon">&#xe67c;</i>
                        <p>点击上传，或将文件拖拽到此处</p>
                    </div>

                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend>高级应用：制作一个多文件列表</legend>
                    </fieldset>

                    <div class="layui-upload">
                        <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
                        <div class="layui-upload-list">
                            <table class="layui-table">
                                <thead>
                                <th>文件名</th>
                                <th>大小</th>
                                <th>状态</th>
                                <th>操作</th>
                                </thead>
                                <tbody id="demoList"></tbody>
                            </table>
                        </div>
                        <button type="button" class="layui-btn" id="testListAction">开始上传</button>
                    </div>

                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend>绑定原始文件域</legend>
                    </fieldset>

                    <input type="file" name="file" id="test20">
                </div>
            </div>
        </div>
    </div>
</div>
<script src="./plugins/layui/layui.js"></script>
<script>
  layui.use('upload', function () {
    var $ = layui.jquery
        , upload = layui.upload;

    //上传文件参数说明：
    //elem 指向容器选择器，如：elem: '#id'。也可以是DOM对象
    //url  接口地址
    //method 上传接口的 HTTP 类型
    //data 请求上传接口的额外参数
    //accept 指定允许上传的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）
    //exts 	允许上传的文件后缀。一般结合 accept 参数类设定。假设 accept 为 file 类型时，那么你设置 exts: 'zip|rar|7z' 即代表只允许上传压缩格式的文件。如果 accept 未设定，那么限制的就是图片的文件格式
    //auto  是否选完文件后自动上传。出事值为true; 如果设定 false，那么需要设置 bindAction 参数来指向一个其它按钮提交上传
    //bindAction  指向一个按钮触发上传，一般配合 auto: false 来使用。值为选择器或DOM对象，如：bindAction: '#btn'
    //field 设定文件域的字段名
    //size 设置文件最大可允许上传的大小，单位 KB。不支持ie8/9   size: 0（即不限制）
    //multiple  是否允许多文件上传。设置 true即可开启。不支持ie8/9
    //number 设置同时可上传的文件数量，一般配合 multiple 参数出现。注意：该参数为 layui 2.2.3 开始新增 number: 0（即不限制）
    //drag 是否接受拖拽的文件上传，设置 false 可禁用。不支持ie8/9
    //回调
    //choose 选择文件后的回调函数。返回一个object参数，详见下文
    //before文件提交上传前的回调。返回一个object参数（同上），详见下文
    //done 执行上传请求后的回调。返回三个参数，分别为：res（服务端响应信息）、index（当前文件的索引）、upload（重新上传的方法，一般在文件上传失败后使用）。详见下文
    //error  执行上传请求出现异常的回调（一般为网络异常、URL 404等）。返回两个参数，分别为：index（当前文件的索引）、upload（重新上传的方法）。详见下文


    //普通图片上传
    var uploadInst = upload.render({
      elem: '#test1'
      , auto: false  //是否选完文件后自动上传。如果设定 false，那么需要设置 bindAction 参数来指向一个其它按钮提交上传
      , bindAction: '#submitInfo'  //#submitInfo 图片提交按钮id名称·
      , before: function (obj) {
        //预读本地文件示例，不支持ie8
        console.log(obj, 'obj is')
        obj.preview(function (index, file, result) {
          $('#demo1').attr('src', result); //图片链接（base64）
          console.log(index)
        });
      }
      , done: function (res) {
        //如果上传失败
        if (res.code > 0) {
          return layer.msg('上传失败');
        }
        //上传成功
      }
      , error: function () {
        //演示失败状态，并实现重传
        var demoText = $('#demoText');
        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
        demoText.find('.demo-reload').on('click', function () {
          uploadInst.upload();
        });
      }
    });

    //多图片上传
    upload.render({
      elem: '#test2'
      , url: '/upload/'
      , multiple: true
      , before: function (obj) {
        //预读本地文件示例，不支持ie8
        obj.preview(function (index, file, result) {
          $('#demo2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
        });
      }
      , done: function (res) {
        //上传完毕
      }
    });

    //指定允许上传的文件类型
    upload.render({
      elem: '#test3'
      , url: '/upload/'
      , accept: 'file' //普通文件
      , done: function (res) {
        console.log(res)
      }
    });
    upload.render({ //允许上传的文件后缀
      elem: '#test4'
      , url: '/upload/'
      , accept: 'file' //普通文件
      , exts: 'zip|rar|7z' //只允许上传压缩文件
      , done: function (res) {
        console.log(res)
      }
    });
    upload.render({
      elem: '#test5'
      , url: '/upload/'
      , accept: 'video' //视频
      , done: function (res) {
        console.log(res)
      }
    });
    upload.render({
      elem: '#test6'
      , url: '/upload/'
      , accept: 'audio' //音频
      , done: function (res) {
        console.log(res)
      }
    });

    //设定文件大小限制
    upload.render({
      elem: '#test7'
      , url: '/upload/'
      , size: 60 //限制文件大小，单位 KB
      , done: function (res) {
        console.log(res)
      }
    });

    //同时绑定多个元素，并将属性设定在元素上
    upload.render({
      elem: '.demoMore'
      , before: function () {
        layer.tips('接口地址：' + this.url, this.item, {tips: 1});
      }
      , done: function (res, index, upload) {
        var item = this.item;
        console.log(item); //获取当前触发上传的元素，layui 2.1.0 新增
      }
    })

    //选完文件后不自动上传
    upload.render({
      elem: '#test8'
      , url: '/upload/'
      , auto: false
      //,multiple: true
      , bindAction: '#test9'
      , done: function (res) {
        console.log(res)
      }
    });

    //拖拽上传
    upload.render({
      elem: '#test10'
      , url: '/upload/'
      , done: function (res) {
        console.log(res)
      }
    });

    //多文件列表示例
    var demoListView = $('#demoList')
        , uploadListIns = upload.render({
      elem: '#testList'
      , url: '/upload/'
      , accept: 'file'
      , multiple: true
      , auto: false
      , bindAction: '#testListAction'
      , choose: function (obj) {
        var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
        //读取本地文件
        obj.preview(function (index, file, result) {
          var tr = $(['<tr id="upload-' + index + '">'
            , '<td>' + file.name + '</td>'
            , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
            , '<td>等待上传</td>'
            , '<td>'
            , '<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
            , '<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
            , '</td>'
            , '</tr>'].join(''));

          //单个重传
          tr.find('.demo-reload').on('click', function () {
            obj.upload(index, file);
          });

          //删除
          tr.find('.demo-delete').on('click', function () {
            delete files[index]; //删除对应的文件
            tr.remove();
            uploadListIns.config.elem.next()[0].value = ''; //清空 request file 值，以免删除后出现同名文件不可选
          });

          demoListView.append(tr);
        });
      }
      , done: function (res, index, upload) {
        if (res.code == 0) { //上传成功
          var tr = demoListView.find('tr#upload-' + index)
              , tds = tr.children();
          tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
          tds.eq(3).html(''); //清空操作
          return delete this.files[index]; //删除文件队列已经上传成功的文件
        }
        this.error(index, upload);
      }
      , error: function (index, upload) {
        var tr = demoListView.find('tr#upload-' + index)
            , tds = tr.children();
        tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
        tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
      }
    });

    //绑定原始文件域
    upload.render({
      elem: '#test20'
      , url: '/upload/'
      , done: function (res) {
        console.log(res)
      }
    });

  });
</script>
</body>
</html>